<template>
  <div class="app">
     <h2>{{msg}}</h2>
     <!-- (3) 通过父传子函数来实现 子传父数据-->
     <MySchool></MySchool>
     <hr>
     <!-- (4) 自定义事件来实现子组件传数据给父组件
              整个流程就是：父组件在子组件上面用v-on定义一个事件名字以及对应触发的方法
              然后再在该子组件里面定义事件的触发
              其中 v-on和@是同一个意思，@是v-on的简写
              自定义组件一句话：在哪个组件上定义，就在哪个组件上去设计怎么触发
              比如这里就是在子组件设计点击触发
    -->

     <!-- (5) 这是第一种自定义事件的绑定（使用v:on或@） -->
     <!-- <MyStudent @aiguigu="getStudentName"></MyStudent> -->

     <MyStudent ref="student" @demo="m1"></MyStudent>
  </div>
</template>

<script>
/**
 * (1) 如果有多个组件定义的样式选择器名字相同，则后引入的组件样式会覆盖前面的
 *     如果想让各个组件的样式给自己使用，避免冲突，则可以在各个组件中加scrope
 * */ 
 import MySchool from './components/MySchool.vue'
 import MyStudent from './components/MyStudent.vue'


  export default {
      name:'App',
      components:{
        MySchool,
        MyStudent
      },
      data() {
        return {
           msg:'你们好啊~'
        }
      },
      methods: {
        /**
         * (8) 触发事件的传递参数和回调函数参数个数要提前约定好好吧
         * (9) 以后如果后面有很多参数或者无法知道有多少参数,那么就直接用
         *     ES6的省略号
         * */ 
        getStudentName(name,...a){
           console.log(name,a)
        },
        m1(name){
          console.log(name)
        }
      },
      mounted() {
         /**
          * (6) 第二种绑定自定义事件的方法（使用ref）
          * 意思是 父组件直接通过ref拿到student组件，再通过$on来绑定事件atguigu，回调函数为getStudentName
          *   这种方式很灵活，因为这条语句可以放在任何地方，不像第一种只能放在子组件里
          *   比如放在定时器里：最后的效果是要等3s后点击才会有结果，因为3s后才定义atguigu，提前点击是没用的
          *  */ 
          setTimeout(()=>{
            /**
             * (7) on就是一触发就有,而once就是只能点一次,和普通事件一样
             * */ 
            // this.$refs.student.$on('atguigu',this.getStudentName)
            this.$refs.student.$once('atguigu',this.getStudentName)
          },3000)
      },
  }
</script>

<style>
    .app{
       background-color: gray;
       /* 
         (2) 才终于真正弄懂padding的意思：
          最外面的盒子大小不变、也不移动，动的是内边距
          这里内边距一加，就可以把父组件包着子组件给体现出来
       */
       padding: 5px;
    }
</style>